.toast {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    flex-direction: column; 
}
.toast_bg {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; 
    animation: fade 1s ;
}
.toast_box {
    position: relative;
    left: 33%;
    top: 37%;
    width:45%;
    height:7%;
    margin: -1rem -1.4rem;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 5px;
    color: #fff; 
    
}
    .toast_text {
     position: absolute;
     bottom: 16%;
     text-align: center;
     width: 90%;
     margin: 0 5%;
     height: 35%;
     overflow: hidden;
     font-size: 14px;
     text-overflow: ellipsis;
     white-space: nowrap; }
    .toast_icon {
     position: relative;
     left: 50%;
     top: 15%;
     margin: -.4rem;
     width: .8rem;
     height: .8rem; }
    .toast_loading {
     -webkit-animation: loading 1s steps(12, end) infinite;
     animation: loading 1s steps(12, end) infinite;
     background: url("") no-repeat;
     background-size: 100%; }
    .toast_success {
     background: url("") no-repeat;
     background-size: 100%; }
    .toast_error {
     background: url("") no-repeat;
     background-size: 100%; }
    .toast_info {
     background: url("") no-repeat;
     background-size: 100%; 
    }
    
   @-webkit-keyframes loading {
    0% {
     -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg); }
    100% {
     -webkit-transform: rotate3d(0, 0, 1, 360deg);
     transform: rotate3d(0, 0, 1, 360deg); } }
    
   @keyframes loading {
    0% {
     -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg); }
    100% {
     -webkit-transform: rotate3d(0, 0, 1, 360deg);
     transform: rotate3d(0, 0, 1, 360deg); } }

  @keyframes fade{
      0%{
          opacity: 0.0;
      }
      10%{
          opacity: 0.1;
      }
      20%{
          opacity: 0.2;
      }
      30%{
          opacity: 0.3;
      }
      40%{
          opacity: 0.4;
      }
      50%{
          opacity: 0.5;
      }
      60%{
          opacity: 0.6;
      }
      70%{
          opacity: 0.7;
      }
      80%{
          opacity: 0.8;
      }
      90%{
          opacity: 0.9;
      }
      100%{
          opacity: 1;
      }
      
  }